// Suppose there is an canvas element named "timelineCanvas"

var ctx = null;
var $timeline = null;
var $timer = null;
var timeline_height = null;
var tlWidth = null;
var markWidth = null;
var rows = null;

function createTimeline(widthVar, heightVar, timeron) {
    tlHeight = heightVar;
    tlWidth = widthVar;
    var half = widthVar/2;
    var quarter = widthVar/4;
    var threeQuarter = 3* widthVar/4;
    var $timeline = $('#timeline')[0];
    $timeline.width = widthVar;
    $timeline.height = heightVar;
    if (timeron) {
        $timer = $('#timer')[0];
        $timer.width = widthVar;
        $timer.height = heightVar;
    }

    $('#timelineDiv').css('height', heightVar);  
    ctx = $timeline.getContext("2d");
  
    ctx.strokeStyle="#000000";
    ctx.font         = '10px sans-serif';
    ctx.textBaseline = 'top';
  
    ctx.fillStyle    = '#D3D3D3';
    ctx.fillRect(0, 12, widthVar, heightVar-24);
    ctx.fillStyle    = '#000';
  
    ctx.beginPath();

    ctx.moveTo(half, 0);
    ctx.lineTo(half, heightVar);
    ctx.closePath();
    ctx.fillText  ('50%', half+3, heightVar-13);
  
    ctx.moveTo(quarter, 0);
    ctx.lineTo(quarter, heightVar);
    ctx.closePath();
    ctx.fillText  ('25%', quarter+3, heightVar-13);
  
    ctx.moveTo(threeQuarter, 0);
    ctx.lineTo(threeQuarter, heightVar);
    ctx.fillText  ('75%', threeQuarter+3, heightVar-13);
    ctx.closePath();
    ctx.stroke();
}

function setTimerPos(relPosition) { //given a integer between 0 and 1000
    timerCtx = $('#timer')[0].getContext("2d");
    var realPosition = relPosition * (tlWidth / 1000);
    timerCtx.clearRect(0, 0, tlWidth, timeline_height);
    timerCtx.beginPath();
    timerCtx.moveTo(realPosition, 12);
    timerCtx.lineTo(realPosition, tlHeight-12);
    timerCtx.closePath();
    timerCtx.stroke();
}

function redrawTimer() {
    var current_time = $("video#show").get(0).currentTime;
    var video_duration = $("video#show").get(0).duration;
    if (current_time != 0) {
        var timer = (current_time/video_duration)*1000;
        setTimerPos(timer); //redraw timer position
    }
}

function createMark(mark) {
    var colorValue = null;
    if (mark.color === "red") {
        colorValue = "#FF0000";
    } else if (mark.color === "green") {
        colorValue = "#008000";
    } else {
        colorValue = "#FFFF00";
    }
    if (mark.selected == "yes") {
        colorValue = "#000000";
    }
    var realYPos = (tlWidth/1000) * mark.relY;
    var x = realYPos - (markWidth / 2);
    var y = 12 + (mark.row-1) * (markWidth + 3);
    ctx.fillStyle = colorValue;
    ctx.fillRect(x,  y, markWidth, markWidth);
    if (mark.selected == "yes") {
        ctx.fillStyle = "#7FFF00";
        ctx.fillRect(x + 1, y + 1, markWidth -2, markWidth -2); 
    }
}

function setRows(markArray) {
    var spacing = 3; //spacing between marks in pixels
    var row_pos = new Array();
    row_pos[0] = -20; //contains the position of the rightmost mark on each row.
    var max_row = 0;
    for (var i = 0; i < markArray.length; i++) {
        var row = 0;
        while (row_pos[row] > (((tlWidth/1000) * (markArray[i].relY)) - markWidth - spacing)) {
            row += 1;
            if (row > max_row) { //create a new row
                max_row = row;
                break;
            }
        }
        row_pos[row] = ((tlWidth/1000) * (markArray[i].relY));
        markArray[i].row = (row+1);
    }
    return max_row+1;
}

function printMarks(markArray, timeron) { //array of objects having x, y pos an color and an timemark and id
    var num_of_rows = rows;
    timeline_height = (num_of_rows*10) + ((num_of_rows-1)*3) + 24;
    createTimeline(tlWidth, timeline_height, timeron);
    for (var i = 0; i < markArray.length; i++) {
        createMark(markArray[i]);
    }
    if (timeron) {
        redrawTimer();
    }
}

function setTime(time) {
    var newTime = time - 3;
    if (newTime <= 0) {
        newTime = 0.1; //close to 0. but we want to see the change
    }
    $("video#show").get(0).currentTime = newTime;
    $("video#show").get(0).pause();
    $("#play").val("paused");
    $("#play").html("Play");
}

function clickAction(clickX, clickY, button, markArray) { //1 for left 3 for right
    var yUpperBound = null;
    var yLowerBound = null;
    var xUpperBound = null;
    var xLowerBound = null;
    var halfMW = markWidth/2;
    for (var i = 0; i < markArray.length; i++) {
        xUpperBound = (markArray[i].relY * (tlWidth/1000)) + halfMW;
        xLowerBound = xUpperBound - markWidth;
        if (clickX < xUpperBound && clickX > xLowerBound) {
            yLowerBound = 12 + (markArray[i].row-1) * (markWidth + 3);
            yUpperBound = yLowerBound + markWidth;
            if (clickY < yUpperBound && clickY > yLowerBound) {
                if (button == 1) {
                    setTime(markArray[i].time);
                } else if (button == 3) {
                    if (markArray[i].selected == "no") {
                        markArray[i].selected = "yes";
                    } else {
                        markArray[i].selected = "no";
                    }
                    printMarks(markArray);
                }
            //alert("totalhitt " + markArray[i].id);
            }
        }
    }

}


function initTimeline(width, marks, mw) {
    markWidth = mw;
    tlWidth = width;
    rows = setRows(marks);
}